<template>
    <div v-loading="systemLoading">
        <el-menu :default-active="activeIndex" @select="handleSelect" class="el-menu-demo" mode="horizontal">
            <el-menu-item index="rate">费用</el-menu-item>
            <el-menu-item index="user">用户</el-menu-item>
            <el-menu-item index="system">系统</el-menu-item>
            <el-menu-item index="agent">代理</el-menu-item>
        </el-menu>
        <div v-loading="systemLoading">
            <div v-show="activeIndex == 'rate'">
                <el-card>
                    <el-form :model="datas.rate" label-width="150px">
                        <el-form-item label="密聊手续费(%)">
                            <el-input placeholder="请输入密聊手续费" style="width: 500px"
                                v-model="datas.rate.secret_fee"></el-input>
                        </el-form-item>

                        <el-form-item label="短视频盈利百分比(%)">
                            <el-input placeholder="请输入短视频盈利百分比" style="width: 500px"
                                v-model="datas.rate.short_rate"></el-input>
                        </el-form-item>

                        <el-form-item label="长视频盈利百分比(%)">
                            <el-input placeholder="请输入长视频盈利百分比" style="width: 500px"
                                v-model="datas.rate.long_rate"></el-input>
                        </el-form-item>

                        <el-form-item label="默认打赏收益(%)">
                            <el-input placeholder="请输入默认打赏收益" style="width: 500px"
                                v-model="datas.rate.default_tipping_rate"></el-input>
                        </el-form-item>

                        <el-form-item label="收到礼物的回扣(%)">
                            <el-input placeholder="请输入收到礼物的回扣" style="width: 500px"
                                v-model="datas.rate.gift_rate"></el-input>
                        </el-form-item>

                        <el-form-item label="直播付费盈利比例(%)">
                            <el-input placeholder="请输入直播付费盈利比例" style="width: 500px"
                                v-model="datas.rate.live_rate"></el-input>
                        </el-form-item>

                        <el-form-item label="金额人民币比例">
                            <el-input placeholder="请输入金额人民币比例(10即为10代币等于1人民币)" style="width: 500px"
                                v-model="datas.rate.balance_rate"></el-input>
                        </el-form-item>

                        <el-form-item label="最小提现代币">
                            <el-input placeholder="请输入最小提现代币" style="width: 500px"
                                v-model="datas.rate.min_withdraw"></el-input>
                        </el-form-item>

                        <el-form-item label="最大提现代币">
                            <el-input placeholder="请输入最大提现代币" style="width: 500px"
                                v-model="datas.rate.max_withdraw"></el-input>
                        </el-form-item>

                        <el-form-item label="提现折扣比例(%)">
                            <el-input placeholder="请输入提现折扣比例" style="width: 500px"
                                v-model="datas.rate.withdraw_rate"></el-input>
                        </el-form-item>

                        <el-form-item label="1V1密聊收益比例(%)">
                            <el-input placeholder="请输入1V1密聊收益比例" style="width: 500px"
                                v-model="datas.rate.one_by_one_rate"></el-input>
                        </el-form-item>

                        <el-form-item label="同城空降收益比例(%)">
                            <el-input placeholder="请输入同城空降收益比例" style="width: 500px"
                                v-model="datas.rate.same_city_rate"></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div v-show="activeIndex == 'user'">
                <el-card>
                    <el-form :model="datas.user" label-width="140px">
                        <el-form-item label="邀请新人标题">
                            <el-input placeholder="请输入密聊手续费" style="width: 500px" type="textarea"
                                v-model="datas.user.invite_title"></el-input>
                        </el-form-item>

                        <el-form-item label="邀请新人介绍">
                            <el-input placeholder="请输入密聊手续费" style="width: 500px" type="textarea"
                                v-model="datas.user.invite_desc"></el-input>
                        </el-form-item>

                        <el-form-item label="邀请码背景">
                            <el-card style="width: 60%;">
                                <el-row :gutter="5">
                                    <div class="pb-10" style="display: flex;flex-wrap: wrap;">
                                        <div style="margin-top: 4px;width: 150px;;margin-right: 20px;">
                                            <el-card :body-style="{ padding: '5px' }" v-if="datas.user.invite_bg">
                                                <el-image :preview-src-list="toArray(datas.user.invite_bg)"
                                                    :src="datas.user.invite_bg" :z-index="999" fit="contain"
                                                    style="width: 100%; height: 100px" />
                                                <div>
                                                    <el-row>
                                                        <el-col :span="24" class="col-do">
                                                            <el-button @click="datas.user.invite_bg = ''" size="medium"
                                                                style="margin-right: 10px;" type="text">删除</el-button>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                            </el-card>

                                            <div v-else>
                                                <medium v-model="datas.user.invite_bg"></medium>
                                            </div>
                                        </div>
                                    </div>
                                </el-row>
                            </el-card>
                        </el-form-item>

                        <el-form-item label="背景">
                            <el-card style="width: 60%;">
                                <el-row :gutter="5">
                                    <div class="pb-10" style="display: flex;flex-wrap: wrap;">
                                        <div :key="index" style="margin-top: 4px;width: 150px;;margin-right: 20px;"
                                            v-for="(item, index) in datas.user.background">
                                            <el-card :body-style="{ padding: '5px' }">
                                                <el-image :preview-src-list="datas.user.background" :src="item"
                                                    :z-index="999" fit="contain" style="width: 100%; height: 100px" />
                                                <div>
                                                    <el-row>
                                                        <el-col :span="24" class="col-do">
                                                            <el-button @click="materialDel(index)" size="medium"
                                                                style="margin-right: 10px;" type="text">删除</el-button>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                            </el-card>
                                        </div>
                                        <div>
                                            <medium :isShow="false" @set-content="setMedium"
                                                style="padding-top: 10px !important;"></medium>
                                        </div>
                                    </div>
                                </el-row>
                            </el-card>
                        </el-form-item>

                        <el-form-item label="头像">
                            <el-card style="width: 60%;">
                                <el-row :gutter="5">
                                    <div class="pb-10" style="display: flex;flex-wrap: wrap;">
                                        <div :key="index" style="margin-top: 4px;width: 150px;;margin-right: 20px;"
                                            v-for="(item, index) in datas.user.avatar">
                                            <el-card :body-style="{ padding: '5px' }">
                                                <el-image :preview-src-list="datas.user.avatar" :src="item" :z-index="999"
                                                    fit="contain" style="width: 100%; height: 100px" />
                                                <div>
                                                    <el-row>
                                                        <el-col :span="24" class="col-do">
                                                            <el-button @click="avatarDel(index)" size="medium"
                                                                style="margin-right: 10px;" type="text">删除</el-button>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                            </el-card>
                                        </div>
                                        <div>
                                            <medium :isShow="false" @set-content="setAvatar" style="padding-top: 10px;">
                                            </medium>
                                        </div>
                                    </div>
                                </el-row>
                            </el-card>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div v-if="activeIndex == 'system'">
                <el-card>
                    <el-form :model="datas.system" label-width="140px">
                        <el-form-item label="货币名称">
                            <el-input placeholder="请输入货币名称" style="width: 500px"
                                v-model="datas.system.coin_name"></el-input>
                        </el-form-item>
                        <el-form-item label="上传驱动">
                            <el-select placeholder="请选择上传驱动" v-model="datas.system.upload_driver">
                                <el-option :key="item.value" :label="item.label" :value="item.value"
                                    v-for="item in options"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="版权模板下载地址">
                            <el-input placeholder="请输入版权模板下载地址" style="width: 500px"
                                v-model="datas.system.copyright_template"></el-input>
                        </el-form-item>

                        <el-form-item label="报错时邮箱发送目标">
                            <el-input placeholder="请输入报错时邮箱发送目标" style="width: 500px"
                                v-model="datas.system.debug_send_mail"></el-input>
                        </el-form-item>

                        <el-form-item label="拨打电话">
                            <el-input placeholder="请输入拨打电话号码" style="width: 500px"
                                v-model="datas.system.contact_platform"></el-input>
                        </el-form-item>

                        <el-form-item label="在线客服">
                            <el-input placeholder="请输入在线客服" style="width: 500px"
                                v-model="datas.system.online_service_url"></el-input>
                        </el-form-item>

                        <el-form-item label="客服邮箱">
                            <el-input placeholder="请输入客服邮箱" style="width: 500px"
                                v-model="datas.system.customer_service_email"></el-input>
                        </el-form-item>

                        <el-form-item label="投诉电话">
                            <el-input placeholder="请输入投诉电话" style="width: 500px"
                                v-model="datas.system.complaints_hotline"></el-input>
                        </el-form-item>

                        <el-form-item label="意见邮箱">
                            <el-input placeholder="请输入意见邮箱" style="width: 500px"
                                v-model="datas.system.opinion_email"></el-input>
                        </el-form-item>

                        <el-form-item label="落地页分享链接">
                            <el-input placeholder="请输入落地页分享链接" style="width: 500px"
                                v-model="datas.system.creation_share_link"></el-input>
                        </el-form-item>

                        <el-form-item label="启动页广告秒数">
                            <el-input placeholder="请输入启动页广告秒数" style="width: 500px"
                                v-model="datas.system.ad_startup_time"></el-input>
                        </el-form-item>

                        <el-form-item label="主题">
                            <el-select placeholder="请选择主题" v-model="datas.system.theme_color">
                                <el-option :key="item.value" :label="item.label" :value="item.value"
                                    v-for="item in themeType"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="用户实名认证协议">
                            <VueEditor v-model="datas.system.authentication_deal"></VueEditor>
                        </el-form-item>
                        <el-form-item label="用户隐私协议">
                            <VueEditor v-model="datas.system.secret_deal"></VueEditor>
                        </el-form-item>
                        <el-form-item label="VIP协议">
                            <VueEditor v-model="datas.system.vip_deal"></VueEditor>
                        </el-form-item>
                        <el-form-item label="自动续费协议">
                            <VueEditor v-model="datas.system.renew_deal"></VueEditor>
                        </el-form-item>
                        <el-form-item label="用户协议">
                            <VueEditor v-model="datas.system.user_deal"></VueEditor>
                        </el-form-item>
                        <el-form-item label="陪秀长视频协议">
                            <VueEditor v-model="datas.system.long_deal"></VueEditor>
                        </el-form-item>
                        <el-form-item label="华为隐私协议">
                            <VueEditor v-model="datas.system.huawei_secret_deal"></VueEditor>
                        </el-form-item>
                        <el-form-item label="华为用户协议">
                            <VueEditor v-model="datas.system.huawei_user_deal"></VueEditor>
                        </el-form-item>
                        <el-form-item label="陪秀注销须知">
                            <VueEditor v-model="datas.system.log_off_deal"></VueEditor>
                        </el-form-item>
                        <el-form-item label="陪秀发布协议">
                            <VueEditor v-model="datas.system.publish_deal"></VueEditor>
                        </el-form-item>
                        <el-form-item label="代理协议须知">
                            <VueEditor v-model="datas.system.agent_notice"></VueEditor>
                        </el-form-item>
                        <el-form-item label="贵州隐私协议">
                            <VueEditor v-model="datas.system.gui_secret_deal"></VueEditor>
                        </el-form-item>
                        <el-form-item label="贵州华为隐私协议">
                            <VueEditor v-model="datas.system.huagui_secret_deal"></VueEditor>
                        </el-form-item>
                        <el-form-item label="版权声明">
                            <VueEditor v-model="datas.system.copyright_notice"></VueEditor>
                        </el-form-item>
                        <el-form-item label="用户使用说明">
                            <VueEditor v-model="datas.system.make_help"></VueEditor>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
            
            <div v-show="activeIndex == 'agent'">
                <el-card>
                    <el-form :model="datas.system" label-width="150px">
                        <el-form-item label="联系代理系统管理员">
                            <el-input placeholder="请输入联系代理系统管理员" style="width: 500px"
                                v-model="datas.agent.admin_contact"></el-input>
                        </el-form-item>
                        <el-form-item label="代理最小提现金额">
                            <el-input placeholder="请输入代理最小提现金额" style="width: 500px"
                                v-model="datas.agent.agent_min_withdraw"></el-input>
                        </el-form-item>

                        <el-form-item label="代理最大提现金额">
                            <el-input placeholder="请输入代理最大提现金额" style="width: 500px"
                                v-model="datas.agent.agent_max_withdraw"></el-input>
                        </el-form-item>

                        <el-form-item label="代理提现到账比例(%)">
                            <el-input placeholder="请输入代理提现到账比例" style="width: 500px"
                                v-model="datas.agent.agent_withdraw_rate"></el-input>
                        </el-form-item>

                        <el-form-item label="管理员联系方式">
                            <el-input placeholder="请输入管理员联系方式" style="width: 500px"
                                v-model="datas.agent.admin_contact"></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </div>

        <div class style="margin: 50px;">
            <el-button :loading="submitComplete" @click="submit" style="width: 200px;margin-left: 160px;" type="primary"
                v-permission="['admin', 'SYSTEM_SAVE']">保 存</el-button>
        </div>
    </div>
</template>

<script>
import medium from '@/components/medium/index'
import VueEditor from '@/components/Editor/index'
import initData from '@/mixins/upload'
export default {
    name:"system-config-list",
    mixins: [initData],
    components: {
        medium,
        VueEditor,
    },
    watch: {
        thumbnail(val) { },
    },
    data() {
        return {
            activeIndex: 'rate',
            icon_url: require('@/assets/image/upload-video-icon.png'),
            thumbnail: '',
            invite_bg: [],
            datas: {
                rate: {},
                agent: {},
                user: {},
                system: {},
            },
            options: [
                {
                    label: '腾讯云上传',
                    value: 'cos',
                },
                {
                    label: '七牛云上传',
                    value: 'qiniu',
                },
            ],
            themeType: [
                {
                    label: '正常主题',
                    value: 'normal',
                },
                {
                    label: '灰色主题',
                    value: 'grey',
                },
            ],
            systemLoading: false,
            submitComplete: false,
            loading: false
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },
        setMedium(value) {
            this.thumbnail = value
            this.datas.user.background.push(value)
        },
        setAvatar(value) {
            //this.thumbnail = value
            console.log('value', value)
            this.datas.user.avatar.push(value)
        },
        changeFun(val) { },

        materialDel(index) {
            this.datas.user.background.splice(index, 1)
        },

        avatarDel(index) {
            this.datas.user.avatar.splice(index, 1)
        },

        toSeleteMaterial() { },
        handleSelect(val) {
            this.activeIndex = val
        },

        getList() {
            this.systemLoading = true
            let that = this
            this.$request.get('/config/index').then((res) => {
                console.log('getList', res)
                this.systemLoading = false
                that.datas = res
                that.invite_bg.push(res.user.invite_bg)
                console.log('res.invite_bg', res.user.invite_bg)
            }).catch((error) => {
                this.systemLoading = true
            });
        },

        submit() {
            if (this.submitComplete) return
            this.submitComplete = true
            this.$request
                .put('/config/update', this.datas[this.activeIndex])
                .then((res) => {
                    this.$message({
                        message: '保存成功',
                        type: 'success',
                    })
                    this.submitComplete = false
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },
    },
}
</script>

<style lang="scss" scoped>/deep/ .el-menu--horizontal>.el-menu-item {
    height: 30px !important;
    line-height: 30px !important;
}

/deep/ .el-upload-dragger {
    width: 150px;
    height: 32px;
    padding: 0;
    overflow: hidden;
    margin-left: 20px;

}

.addimg {
    margin-top: 20px;
    width: 130px;
    height: 130px;
    margin-left: 10px;
}</style>